<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"  />
		<title>按钮和折叠插件</title>
		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
		<style>
			.a{
				height: 50px;
				width: 100px;
				border:1px solid #ccc;
				background: #eee;
			}
		</style>
	</head>
	<body style="margin: 100px;">
		<!--一、按钮-->
		<button class="btn btn-primary" data-toggle="button" autocomplete="off">单个切换</button>
		<!--单选-->
		<div class="btn-group" data-toggle="buttons">
			<label class="btn btn-primary active">
				<input type="radio" name="sex" value="男" checked />男
			</label>
			<label class="btn btn-primary">
				<input type="radio" name="sex" value="女"/>女
			</label>
		</div>
		
		<!--多选-->
		<div class="btn-group" data-toggle="buttons">
			<label class="btn btn-primary active">
				<input type="checkbox" name="fa" value="吃饭" checked/>吃饭
			</label>
			<label class="btn btn-primary">
				<input type="checkbox" name="fa" value="睡觉"/>睡觉
			</label>
			<label class="btn btn-primary ">
				<input type="checkbox" name="fa" value="购物" />购物
			</label>
			<label class="btn btn-primary">
				<input type="checkbox" name="fa" value="旅游"/>旅游
			</label>
		</div>
		
		<!--加载状态-->
		<button id="myButton" class="btn btn-primary" data-abc-text="Loading">开始上传</button>
		<button id="btn" class="btn btn-primary">按钮</button>
		
		<!--二、折叠-->
		<div style="margin-top: 20px;">
			<button class="btn btn-primary">Bootstrap</button>
		</div>
		
		<script src="jquery.min.js"></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>
		<script>
/*			$("#myButton").on('click',function(){
				var btn = $(this).button('loading');
				setTimeout(function(){
					btn.button('reset');
				},1000);
			});*/
			
			$('#btn').on('click',function(){
				$(this).button('toggle');
			})
		</script>
	</body>
	
</html>
